<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>视频异常检测分析系统</title>
  <style>
    :root {
      --primary-color: #3b59db;
      --secondary-bg: #f5f7fa;
      --dark-bg: #222;
      --light-bg: #fff;
      --text-dark: #333;
      --text-light: #fff;
      --border-color: #ddd;
      --danger: #e74c3c;
      --warning: #f39c12;
      --success: #2ecc71;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    body {
      background-color: var(--secondary-bg);
      color: var(--text-dark);
    }

    .header {
      background-color: var(--dark-bg);
      color: var(--text-light);
      padding: 12px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    .header .logo {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 18px;
      font-weight: bold;
    }

    .header .logo i {
      font-size: 20px;
    }

    .header .nav-right {
      display: flex;
      gap: 20px;
      align-items: center;
    }

    .header .nav-item {
      display: flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;
    }

    .header .nav-item i {
      font-size: 16px;
    }

    .container {
      display: flex;
      gap: 20px;
      padding: 20px;
      max-width: 1200px;
      margin: 0 auto;
    }

    .sidebar {
      width: 280px;
      background-color: var(--light-bg);
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    }

    .sidebar h3 {
      margin-bottom: 15px;
      font-size: 14px;
      color: #666;
    }

    .form-group {
      margin-bottom: 20px;
    }

    .form-group label {
      display: block;
      margin-bottom: 8px;
      font-size: 14px;
    }

    .form-control {
      width: 100%;
      padding: 8px 12px;
      border: 1px solid var(--border-color);
      border-radius: 4px;
      font-size: 14px;
    }

    .radio-group {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .radio-item {
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
    }

    .radio-item input[type="radio"] {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      width: 16px;
      height: 16px;
      border: 2px solid #ccc;
      border-radius: 50%;
      position: relative;
      cursor: pointer;
    }

    .radio-item input[type="radio"]:checked {
      background-color: var(--primary-color);
      border-color: var(--primary-color);
    }

    .radio-item input[type="radio"]:checked::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 6px;
      height: 6px;
      background-color: white;
      border-radius: 50%;
    }

    .radio-item span {
      font-size: 14px;
    }

    .slider-container {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 10px;
    }

    /* 滑块容器基础样式 */
    .slider {
      -webkit-appearance: none;  /* 清除浏览器默认样式 */
      width: 100%;
      height: 8px;
      border-radius: 4px;
      background: #e0e0e0;  /* 未选中部分轨道颜色 */
      outline: none;
      margin: 10px 0;
    }

    /* webkit 内核浏览器（Chrome/Safari/Edge）轨道样式 */
    .slider::-webkit-slider-runnable-track {
      -webkit-appearance: none;
      height: 6px;
      border-radius: 4px;
      background: linear-gradient(to right, #4CAF50 60%, #e0e0e0 60%);
      /* 上面的 60% 对应默认值，实际使用时可通过 JS 动态更新 */
    }

    /* 滑块按钮样式（webkit 内核） */
    .slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #4CAF50;  /* 按钮颜色 */
      cursor: pointer;
      border: 2px solid white;
      box-shadow: 0 0 2px rgba(0,0,0,0.2);
      transition: all 0.2s ease;
    }

    .btn-group {
      display: flex;
      gap: 10px;
      margin-top: 20px;
    }

    .btn {
      padding: 10px 16px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
      transition: all 0.2s;
    }

    .btn-primary {
      background-color: var(--primary-color);
      color: white;
    }

    .btn-secondary {
      background-color: #e0e0e0;
      color: #333;
    }

    .btn:hover {
      opacity: 0.9;
    }

    .performance-card {
      background-color: var(--dark-bg);
      color: var(--text-light);
      padding: 15px;
      border-radius: 8px;
      margin-top: 20px;
    }

    .performance-card h4 {
      margin-bottom: 10px;
      font-size: 14px;
    }

    .metrics {
      display: flex;
      justify-content: space-between;
    }

    .metric {
      text-align: center;
    }

    .metric-value {
      font-size: 24px;
      font-weight: bold;
      margin: 5px 0;
    }

    .metric-label {
      font-size: 12px;
      color: #aaa;
    }

    .main-content {
      flex: 1;
    }

    .video-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
    }

    .video-title {
      font-size: 18px;
      font-weight: bold;
    }

    .status-badge {
      background-color: #e0e0e0;
      color: #666;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 12px;
    }

    .detection-time {
      font-size: 12px;
      color: #666;
    }

    .video-container {
      position: relative;
      width: 100%;
      height: 300px;
      background-color: #000;
      border-radius: 8px;
      overflow: hidden;
      margin-bottom: 20px;
    }

    .video-placeholder {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
    }

    .play-button {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.8);
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }

    .play-icon {
      width: 0;
      height: 0;
      border-left: 20px solid white;
      border-top: 12px solid transparent;
      border-bottom: 12px solid transparent;
    }

    .video-info {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
      padding: 10px 15px;
      color: white;
      font-size: 12px;
    }

    .chart-container {
      background-color: white;
      padding: 15px;
      border-radius: 8px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
      margin-bottom: 20px;
    }

    .chart-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
    }

    .chart-title {
      font-size: 14px;
      font-weight: bold;
    }

    .refresh-btn {
      background-color: #cce5ff;
      color: var(--primary-color);
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 12px;
      cursor: pointer;
    }

    .chart {
      height: 200px;
      position: relative;
    }

    .chart-line {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url('') no-repeat center;
      background-size: contain;
    }

    .chart-y-axis {
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 5px 0;
      font-size: 12px;
      color: #666;
    }

    .chart-x-axis {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      display: flex;
      justify-content: space-between;
      padding: 5px 0;
      font-size: 12px;
      color: #666;
    }

    .threshold-line {
      position: absolute;
      left: 0;
      right: 0;
      height: 1px;
      background-color: #ff6b6b;
      top: 40%;
      /* 60% on y-axis */
    }

    .threshold-label {
      position: absolute;
      right: 10px;
      top: 40%;
      transform: translateY(-50%);
      background-color: white;
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 12px;
      color: #ff6b6b;
    }

    .analysis-sections {
      display: flex;
      gap: 20px;
      margin-top: 20px;
    }

    .analysis-card {
      flex: 1;
      background-color: white;
      padding: 15px;
      border-radius: 8px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    }

    .analysis-card h3 {
      margin-bottom: 15px;
      font-size: 16px;
      font-weight: bold;
    }

    .event-item {
      padding: 12px;
      border-bottom: 1px solid var(--border-color);
      margin-bottom: 12px;
    }

    .event-item:last-child {
      border-bottom: none;
      margin-bottom: 0;
    }

    .event-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 5px;
    }

    .event-title span:first-child {
      font-weight: bold;
      font-size: 14px;
    }

    .event-title span:last-child {
      font-size: 12px;
      color: #666;
    }

    .event-description {
      font-size: 13px;
      color: #666;
      margin-bottom: 5px;
    }

    .progress-bar {
      height: 6px;
      background-color: #eee;
      border-radius: 3px;
      margin-top: 5px;
      overflow: hidden;
    }

    .progress-fill {
      height: 100%;
      background-color: var(--primary-color);
      border-radius: 3px;
    }

    .progress-text {
      text-align: right;
      font-size: 12px;
      color: #666;
      margin-top: 5px;
    }

    .high-risk-event {
      background-color: #fff;
      padding: 15px;
      border-radius: 8px;
      border-left: 4px solid var(--danger);
    }

    .high-risk-title {
      font-size: 16px;
      font-weight: bold;
      color: var(--danger);
      margin-bottom: 8px;
    }

    .high-risk-time {
      font-size: 12px;
      color: #666;
      margin-bottom: 15px;
    }

    .event-desc-title {
      font-size: 14px;
      font-weight: bold;
      margin-bottom: 8px;
    }

    .event-desc-content {
      font-size: 13px;
      line-height: 1.5;
      color: #666;
    }

    /* 响应式设计 */
    @media (max-width: 768px) {
      .container {
        flex-direction: column;
      }

      .sidebar {
        width: 100%;
      }

      .analysis-sections {
        flex-direction: column;
      }
    }
  </style>
</head>

<body>
  <!-- 头部导航 -->
  <header class="header">
    <div class="logo">
      <i>📊</i>
      <span>视频异常检测分析系统</span>
    </div>
    <div class="nav-right">
      <div class="nav-item">
        <i>⚙️</i>
        <span>设置</span>
      </div>
      <div class="nav-item">
        <i>❓</i>
        <span>帮助</span>
      </div>
      <div class="nav-item">
        <i>📧</i>
        <span>display@ai.com</span>
      </div>
    </div>
  </header>

  <!-- 主容器 -->
  <div class="container">
    <!-- 侧边栏 -->
    <aside class="sidebar">
      <h3>数据集</h3>
      <select class="form-control">
        <option>XD-Violence</option>
        <option>UCF-Crime</option>
        <option>ShanghaiTech</option>
      </select>

      <h3>异常阈值</h3>
      <div class="slider-container">
        <span>60%</span>
        <input type="range" min="0" max="100" value="60" class="slider" id="threshold-slider">
      </div>

      <div class="btn-group">
        <button class="btn btn-primary">
          <i>▶️</i> 开始分析
        </button>
        <button class="btn btn-secondary">
          <i>📤</i> 导出报告
        </button>
      </div>

      <div class="performance-card">
        <h4>模型性能指标</h4>
        <div class="metrics">
          <div class="metric">
            <div class="metric-value">0.924</div>
            <div class="metric-label">AUC</div>
          </div>
          <div class="metric">
            <div class="metric-value">0.788</div>
            <div class="metric-label">AP</div>
          </div>
        </div>
      </div>
    </aside>

    <!-- 主内容区 -->
    <main class="main-content">
      <!-- 视频流分析 -->
      <div class="video-header">
        <div class="video-title">视频流分析</div>
        <div class="status-badge">就绪中</div>
        <div class="detection-time">检测时间：2025-10-23 14:30:15</div>
      </div>

      <!-- 视频播放器 -->
      <div class="video-container">
        <div class="video-placeholder">
          <div class="play-button">
            <div class="play-icon"></div>
          </div>
        </div>
        <div class="video-info">
          银行入口监控 - 画面时间：12:04:26
        </div>
      </div>

      <!-- 异常分数曲线图 -->
      <div class="chart-container">
        <div class="chart-header">
          <div class="chart-title">异常分数曲线</div>
          <div class="refresh-btn">🔄 实时更新</div>
        </div>
        <div class="chart">
          <div class="chart-line"></div>
          <div class="chart-y-axis">
            <span>100</span>
            <span>80</span>
            <span>60</span>
            <span>40</span>
            <span>20</span>
            <span>0</span>
          </div>
          <div class="chart-x-axis">
            <span>11:58</span>
            <span>12:02</span>
            <span>12:06</span>
            <span>12:10</span>
          </div>
          <div class="threshold-line"></div>
          <div class="threshold-label">阈1</div>
        </div>
      </div>

      <!-- 分析结果 -->
      <div class="analysis-sections">
        <!-- 异常事件分析 -->
        <div class="analysis-card">
          <h3>异常事件分析</h3>

          <div class="event-item">
            <div class="event-title">
              <span>可疑人员聚众</span>
              <span>12:02:17 - 12:04:36</span>
            </div>
            <div class="event-description">4名人员在入口处长时间聚集</div>
            <div class="progress-bar">
              <div class="progress-fill" style="width: 86%;"></div>
            </div>
            <div class="progress-text">86%</div>
          </div>

          <div class="event-item">
            <div class="event-title">
              <span>异常奔跑行为</span>
              <span>12:05:41 - 12:05:58</span>
            </div>
            <div class="event-description">工作人员快速离开服务区域</div>
            <div class="progress-bar">
              <div class="progress-fill" style="width: 72%; background-color: #f39c12;"></div>
            </div>
            <div class="progress-text">72%</div>
          </div>

          <div class="event-item">
            <div class="event-title">
              <span>物品丢失</span>
              <span>12:06:15 - 12:06:30</span>
            </div>
            <div class="event-description">柜台物品被拿走未归还</div>
            <div class="progress-bar">
              <div class="progress-fill" style="width: 48%; background-color: #f39c12;"></div>
            </div>
            <div class="progress-text">48%</div>
          </div>
        </div>

        <!-- 异常深度分析 -->
        <div class="analysis-card">
          <h3>异常深度分析</h3>

          <div class="high-risk-event">
            <div class="high-risk-title">高危事件 可疑人员聚众</div>
            <div class="high-risk-time">12:02:17 - 12:04:36 | 持续时长：2分19秒</div>

            <div class="event-desc-title">事件描述</div>
            <div class="event-desc-content">
              四名可疑人员在银行入口处长时间滞留，存在顺时针方向绕行行为，其中一人携带背包且反复观察银行内部布局与安保摄像头位置。过程中倾向背对摄像头方向交流，此群体行为模式与常规客户差异率达87.3%。
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</body>

</html>